<template>
	<!-- 三进打卡页面 -->

	<view>
		<!-- 上方view -->
		<view class='withoutMap'>
			<!-- 个人信息 -->
			<view class="u-flex u-row-around">
				<!-- 头像姓名学院 -->
				<view class="u-flex">
					<view>
						<u-avatar :src="default_avatar"></u-avatar>
					</view>
					<view>
						<view>{{ name }}</view>
						<view>{{ department }}</view>
					</view>
				</view>

				<!-- 日期 -->
				<view>
					<text>{{ today }}</text>
				</view>
			</view>

			<u-line border-style="solid" length="100%"></u-line>

			<!-- 打卡按钮及提示 -->
			<!-- <view class="u-flex u-col-center btn" style="flex-direction: column; align-items: center"> -->
			<view class="u-flex u-row-center">
				<view class="u-flex btn" style="flex-direction: column;">
					<!-- 按钮 -->
					<view class="u-p-40">
						<button class="center_btn" @click="remarkBoxShow = true">
							<view>三进打卡</view>
							<view>{{ _time }}</view>
						</button>
					</view>
					<!-- 提示 -->
					<view class="msg u-flex" style="flex-direction: column; justify-content: center">
						<view v-if="position!==''" class="hint">已经进入打卡范围，{{ position }} </view>
						<view v-else class="hint">{{ clockInfo.enterPlace }}</view>
						<view class="hint">
							<text class="link" @click="getLocationInfo">
								重新定位
							</text>
						</view>
					</view>
				</view>
			</view>


		</view>

		<!-- 下方view -->
		<view v-show="!remarkBoxShow" style="z-index: -1;">
			<map class="map" :scale='18' id="myMap" :markers="markers" :longitude="longitude" :latitude="latitude"
				:circles="circles">
			</map>
		</view>
		
		
		<!-- 备注输入框 -->
		<u-mask :show="remarkBoxShow">
		
			<!-- <view class="rect" @tap.stop></view> -->
			<transition name="slide-fade">
				<view class="remark-box">
					<view class="title">打卡备注</view>
					<view>您当前的位置:{{ clockInfo.enterPlace }}</view>
					
					<!-- <default-fill></default-fill> -->
					
					
					
					<u-input v-model="clockInfo.enterRemarks" type="textarea" :border="true" :height="200" @click="actionSheetListShow = clockInfo.enterRemarks===''"
						style="margin-top: 30rpx;" />
		
					<u-row style="padding: 20rpx 0;">
						<u-button type="info" @click="closeMask()">取消打卡</u-button>
						<u-button type="success" @click="clockHandler()">确认打卡</u-button>
					</u-row>
				</view>
			</transition>
		
		</u-mask>
		
		<!-- 放在最外层view适配不同的显示 -->
		<u-action-sheet :list="actionSheetList" v-model="actionSheetListShow" @click="actionSheetCallback"></u-action-sheet>
	
	
	</view>
</template>

<script>
	import { jsonp } from 'vue-jsonp'
	
	export default {
		mounted() {
			// this.time = 123
			let that = this
			setInterval(function() {
				that.time += 1 * 1000
			}, 1000)
			
			this.name = this.$store.state.userInfo.name
		},
		data() {
			return {
				time: +new Date(),
				default_avatar: "/static/default_avatar.png",
				name: "name",
				department: "计算机与通信工程学院",
				position: "",
				
				// 是否显示默认内容选择器
				actionSheetListShow: false,
				actionSheetList: [
					{
						text: '寝室日常巡检'
					},
					{
						text: '考场巡视'
					},
					{
						text: '课堂巡视'
					}
				],
				// 在data中初始化的中心位置
				latitude: 28.08191,
				longitude: 113.039985,
				//data中定义
				circles: [], //圆
				markers: [], //标记点
				
				remarkBoxShow: false,
				
				clockInfo: {
					enterPlace: '',
					enterRemarks: ''
				}
			}
		},
		onLoad() {
			this.map = uni.createMapContext("myMap", this);
		},
		onShow() {
			this.getLocationInfo()
		},
		methods: {
			getLocationInfo() {
				var that = this
				
				// let getUrl = 'https://api.map.baidu.com/location/ip?ak=DDgMRRvbCrE9I4VeqWLpEzsee1vmVenE&ip=&coor=bd09ll'
				// jsonp(getUrl).then(msg => {
				// 	console.log('百度地图的res', msg)
				// 	// that.clockInfo.enterPlace = msg.result.formatted_address
				// })
				
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success(res) {
						console.log('地址', res)
						
						if (res.address !== undefined) {
							let address = res.address
							that.clockInfo.enterPlace = address.province + address.city + address.district 
														+ '-' + address.street + address.streetNum + address.poiName
						} else {
							// h5的情况
							let url = "http://api.map.baidu.com/reverse_geocoding/v3/?ak=DDgMRRvbCrE9I4VeqWLpEzsee1vmVenE&output=json&coordtype=gcj02ll&location=" +res.latitude + "," + res.longitude
							jsonp(url).then(msg => {
								console.log('res', msg)
								that.clockInfo.enterPlace = msg.result.formatted_address
							})
						}
						// that.clockInfo.enterPlace = 
						// 	res.address.province + res.address.city + res.address.district + 
						// 	res.address.street + res.address.streetNum + '-' + res.address.poiName
						
						
						uni.showToast({
						    title: '获取定位成功',
						    duration: 1500
						});
						
						
						
						that.map.moveToLocation();
						// console.log(res, "当前位置");
						that.latitude = res.latitude //当前纬度
						that.longitude = res.longitude //当前经度
						//标记点
						that.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/pos.png'
						}]

					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.clockInfo.enterRemarks = this.actionSheetList[index].text
			},
			
			clockHandler() {
				if (this.clockInfo.enterPlace == '' || this.clockInfo.enterRemarks == '') {
					this.closeMask()
					uni.showToast({
						title: '位置或备注为空',
						duration: 2000,
						icon: 'none'
					})
				} else {
					// 提交三进
					let that = this
					this.$u.api.submitTrienter(this.clockInfo).then(res => {
						if (res.code === 0) {
							this.closeMask()
							uni.showToast({
								title: '提交成功',
								duration: 2000,
								icon: 'success'
							})
							// 页面转跳
						}else {
							uni.showToast({
								title: '出现错误',
								duration: 2000,
								icon: 'none'
							})
						}
					}).catch(err => {
						uni.showToast({
							title: '出现错误',
							duration: 2000,
							icon: 'none'
						})
					})
					console.log(this.clockInfo.enterPlace, this.clockInfo.enterRemarks)
					
				}
				
			},
			closeMask() {
				this.remarkBoxShow = false
				this.clockInfo.enterRemarks = '' 
			}
		},
		computed: {
			today: function() {
				let base = new Date()
				return this.$time_formatter.time_formatter(base)
			},
			_time: function() {
				let _time = new Date(this.time)
				let res = ''
				res += _time.getHours() + ":"
				res += _time.getMinutes() < 10 ? '0' + _time.getMinutes() + ":" : _time.getMinutes() + ":"
				res += _time.getSeconds() < 10 ? '0' + _time.getSeconds() : _time.getSeconds()
				return res
			}
		}
	}
</script>

<style lang="scss">
	.remark-box {
		padding: 30rpx 30rpx;
		position: fixed;
		top: 50%;
		width: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: white;
		z-index: 100;
		border-radius: 30rpx;
	
		box-shadow: 0 10rpx 13rpx rgba(0, 0, 0, .175);
	}
	.title {
		text-align: center;
		font-weight: 500;
		font-size: 19px;
		/* margin-top: 20rpx; */
		// letter-spacing: 5px;
	}
	page {

		background: linear-gradient(to bottom, #ffffff, #efefef);
	
		// 上方样式
		.withoutMap {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 50%;

			.btn {
				position: absolute;
				bottom: 10%;

				.center_btn {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;
					background-color: #007AFF;
					text-align: center;
					color: white;
					line-height: 50rpx;
					padding-top: 75rpx;
				}

				.hint {
					padding: 20rpx 40rpx;
					font-size: 20rpx;
					color: $u-tips-color;

					.link {
						color: #007AFF;
					}
				}

			}
		}

		// 下方样式
		.map {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 50%;
			background-color: #cec1c1;
		}
	}
</style>
